<template>
  <div class="box">
    <category-edit ref="categoryEdit" v-on:save-finished="searchcategory"></category-edit>
    <div class="filter-container">
      <el-input
        placeholder="档案号/姓名"
        v-model="search.queryString"
        style="width: 250px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
      <el-button slot="append" icon="el-icon-search" @click="searchcategory()"></el-button>
      </el-input>
    </div>
    <el-table
      height="620px"
      size="small"
      current-row-key="id"
      :data="dataList"
      stripe
      highlight-current-row
    >
      <el-table-column prop="filenumber" align="center" label="档案号" ></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
       <el-table-column prop="sex" label="性别" align="center"></el-table-column>
      <el-table-column prop="age" label="年龄" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" align="center"></el-table-column>
      <el-table-column prop="category" label="人群分类"  align="center"></el-table-column>
      <el-table-column prop="operator" label="健康管理师" align="center" ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEditcategory(scope.row)"
            >确认分类</el-button
          >
          <el-button size="mini" type="danger" @click="handleDeletecategory(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background     
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[3,5,10]"
        :page-size="3"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import categoryEdit from '@/components/category/categoryEdit'
import { listcategory, removecategory} from "@/api/category";
// import { getCheckitemById } from '@/api/checkitem'

export default {
  data() {
    return {
      dataList: [], //当前页要展示的分页列表数据
      total: 0, //总记录数
      //查询参数
      search: {
        pageSize: 3,
        pageNum: 1,
        queryString: "",
      },
    };
  },
  methods: {
    searchcategory() {
      this.loading = true;
      listcategory(this.search)
        .then((response) => {
          console.log(response);
          this.dataList = response.data.list;
          this.total = response.data.total;
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    //每页条数改变方法
    handleSizeChange(val) {
      this.search.pageSize = val;
      this.searchcategory();
    },
    //当前页改变方法
    handleCurrentChange(val) {
      this.search.pageNum = val;
      this.searchcategory();
    },
    // 删除按钮操作
    handleDeletecategory(row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        removecategory(row.id)
        .then(response => {
          this.searchcategory()
        })
        .catch(error => {
          this.outputError(error)                
        })
      })
      .catch(() => {})
    },
    async handleEditcategory(row) {
        this.$refs.categoryEdit.$emit('openEditcategoryDialog', row)
    },
    //初始化
    async pageInit() {
      this.searchcategory();
    },
    //错误信息
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  components: { categoryEdit },
  created() {
    //调用初始化
    this.pageInit();
  },
};
</script>

<style lang="scss" scoped>
</style>

